<template>
    <div class='fxn-body'>
        <div class="fxn-wrap">
            <div class="fxn-wrap-left">
                <div class="title">
                    <el-button type="primary" icon="Plus" @click="handleOp(1)">创建角色</el-button>
                </div>
                <div class="rows">
                    <el-table ref="tableRefs" v-loading="loading" :data="listData" scrollbar-always-on style="width: 100%" highlight-current-row  @row-click="handleSelect">
                        <el-table-column label="角色名称" prop="title" />
                        <el-table-column width="90">
                            <template #default="scope">
                                <el-icon v-if="scope.row.pid != 0"><Setting /></el-icon>
                                <el-icon v-if="scope.row.pid != 0" class="fxn-margin-0-8" @click="handleOp(2,scope.row)"><Edit /></el-icon>
                                <el-icon v-if="scope.row.pid != 0" @click="handleOpDel(scope.row.id)"><Delete /></el-icon>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- Left End -->
            <div class="fxn-wrap-right">
                <div class="fxn-top">
                    <el-button type="primary" icon="Link" @click="handleRelated">关联员工</el-button>
                </div>
                <!-- Top End -->
                <div class="fxn-section fxn-margin-t-20">
                    <el-table v-loading="loading" :data="depData" scrollbar-always-on style="width: 100%" highlight-current-row>
                        <el-table-column label="姓名" prop="username" />
                        <el-table-column label="部门" prop="department" />
                        <el-table-column label="角色" prop="roles" />
                        <el-table-column label="操作" width="80">
                            <template #default="scope">
                                <el-icon @click="handleDepDel(scope.row.id)"><Delete /></el-icon>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- Right End -->

            <!-- Page -->
            <div class="fxn-page wrap-fixed">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 50, 100, 250, 500]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="count"></el-pagination>
            </div>
            <!-- Page End -->
        </div>
        <!-- Wrap End -->

        <!-- 创建/编辑角色 -->
        <el-dialog :title="opTitle" v-model="opDialog" :before-close="handleOpClose">
            <el-form :model="opForm" ref="opRef" :rules="opRules" label-width="120px">
                <el-form-item label="角色名称" prop="title">
                    <el-input v-model="opForm.title" maxlength="18" placeholder="请输入角色名称"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleOpClose">取消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="handleOpSubmit">确认</el-button>
            </template>
        </el-dialog>
        <!-- 创建/编辑角色 End-->

        <!-- 关联员工 -->
        <el-dialog title="关联员工" v-model="relatedDialog" :before-close="handleRelatedClose">
            <el-form :model="relatedForm" ref="relatedRef" :rules="relatedRules" label-width="120px">
                <el-form-item label="选择员工" prop="title">
                    <el-select v-model="relatedForm.user_ids" multiple collapse-tags placeholder="请选择">
                        <el-option v-for="(item,index) in relatedData" :key="index" :label="item.username" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleRelatedClose">取消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="handleRelatedSubmit">确认</el-button>
            </template>
        </el-dialog>
        <!-- 关联员工 End-->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 1,
                limit: 10,
                loading: false,
                listData: [],

                //操作角色
                opTitle: '创建角色',
                btnLoading: false,
                opDialog: false,
                opRef: '',
                opForm: {
                    id: '',
                    title: ''
                },
                opRules: {
                    title: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
                },

                //部门
                roleID: '',
                depData: [],

                //关联员工
                relatedDialog: false,
                relatedData: [],
                relatedRef: '',
                relatedForm: {
                    user_ids: '',
                },
                relatedRules: {
                    user_ids: [{ required: true, message: "请选择员工", trigger: "blur" }],
                },

                //数据权限
                typeData: [
                    {type: 1, label: '本人'},
                    {type: 2, label: '本人及下属'},
                    {type: 3, label: '本部门'},
                    {type: 4, label: '本部门及下属部门'},
                    {type: 5, label: '全部'},
                ],
            })

            //获取角色列表
            const getRole = () => {
                proxy.$http.post('/api/setting/groupindex')
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 200){
                        proxy.$message.error(msg);
                    }else{
                        state.listData = data;
                        
                        //判断数据数量大于0
                        if(data.length > 0){
                            proxy.$refs.tableRefs.setCurrentRow(state.listData[0]);
                            state.opForm.id = data[0].id;
                            state.relatedForm.id = data[0].id;
                            getDep();
                        }
                    }
                })
            }

            //创建角色
            const handleOp = (type,item) => {
                state.opType = type;
                if(type == 1){
                    state.opTitle = '创建角色';
                    state.opForm.id = '';
                }else{
                    state.opTitle = '编辑角色';
                    state.opForm.id = item.id;
                    state.opForm.title = item.title;
                }
                state.opDialog = true;
            }

            //保存角色
            const handleOpSubmit = () => {
                state.btnLoading = true;
                let apiUrl = '';
                if(state.opType == 1){
                    apiUrl = '/api/setting/savegroup'
                }else{
                    apiUrl = '/api/setting/updategroup'
                }
                state.opRef.validate((valid) => {
                    if(valid){
                        proxy.$http.post(apiUrl,state.opForm)
                        .then(res=> {
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 200){
                                proxy.$message.error(msg);
                            }else{
                                state.opDialog = false;
                                proxy.$message.success(data);
                                proxy.$refs.opRef.resetFields();
                                getDep();
                                getRole();
                            }
                        })
                    }
                })
            }

            //关闭操作角色
            const handleOpClose = () => {
                state.opDialog = false;
                proxy.$refs.opRef.resetFields();
            }

            //删除角色
            const handleOpDel = (id) => {
                proxy.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(res=> {
                    proxy.$http.post('/api/setting/delgroup',{id: id})
                    .then(res=> {
                        const { code, msg ,data } = res;
                        if(code != 200){
                            proxy.$message.error(msg);
                        }else{
                            proxy.$message.success(data);
                            getRole();
                        }
                    })
                })
            }

            //选中角色
            const handleSelect = (e) => {
                state.opForm.id = e.id;
                state.relatedForm.id = e.id;
                getDep();
            }

            //获取员工
            const getDep = () => {
                proxy.$http.post('/api/setting/roleuserlist',{
                    page: state.page,
                    limit: state.limit,
                    id: state.opForm.id,
                })
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 200){
                        proxy.$message.error(msg);
                    }else{
                        state.count = data.count;
                        state.depData = data.list;
                    }
                })
            }

            //删除员工
            const handleDepDel = (id) => {
                proxy.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(res=> {
                    proxy.$http.post('/api/setting/roleUsersDel',{
                        roleids: state.relatedForm.id,
                        user_ids: id,
                    })
                    .then(res=> {
                        const { code, msg ,data } = res;
                        if(code != 200){
                            proxy.$message.error(msg);
                        }else{
                            proxy.$message.success(data);
                            getRole();
                        }
                    })
                })
            }

            //关联员工
            const handleRelated = () => {
                state.relatedDialog = true;
                proxy.$http.post('/api/user/getUserList')
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 200){
                        proxy.$message.error(msg);
                    }else{
                        state.relatedData = data;
                    }
                })
            }

            //提交关联员工
            const handleRelatedSubmit = () => {
                state.relatedRef.validate((valid) => {
                    if(valid){
                        proxy.$http.post('/api/setting/ruleusers',state.relatedForm)
                    .then(res=> {
                        const { code, msg ,data } = res;
                        if(code != 200){
                            proxy.$message.error(msg);
                        }else{
                            state.relatedDialog = false;
                            proxy.$message.success(data);
                            proxy.$refs.relatedRef.resetFields();
                            getDep();
                        }
                    })
                    }
                })
            }

            //关闭关联员工
            const handleRelatedClose = () => {
                state.relatedDialog = false;
                proxy.$refs.relatedRef.resetFields();
            }

            //分页
            const handleSizeChange = (val) => {
                state.limit = val;
                getDep();
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getDep();
            }
            
            //Dom加载
            onMounted(()=>{
                getRole();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getDep,
                getRole,
                handleOp,
                handleOpSubmit,
                handleOpClose,
                handleOpDel,
                handleSelect,
                handleDepDel,
                handleRelated,
                handleRelatedSubmit,
                handleRelatedClose,
                
                //组件方法
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>